import React, {Component,lazy,Suspense } from 'react'
import {Redirect,Route,Switch} from 'react-router-dom'
import { SpinLoading } from 'antd-mobile'
var Home = lazy(()=>import('../pages/home.jsx'))
var Login = lazy(()=>import('../pages/login'))
var Logon = lazy(()=>import('../pages/logon'))
var search = lazy(()=>import('../pages/search'))
var AllProducts = lazy(()=>import('../pages/AllProducts'))
var CategorySearch = lazy(()=>import('../pages/categorySearch'))
var Details = lazy(()=>import('../pages/details'))
var Collection = lazy(()=>import('../pages/collection'))
var NotFound = lazy(()=>import('../pages/notfound'))



class App extends Component{
    render() {
        return (
            <div className='app'>
                <Suspense fallback={<SpinLoading /> }>
                    <Switch>
                        {/* 首页 */}
                        <Route path="/home" component={Home} />
                        {/* 搜索页面 */}
                        <Route path="/search" component={search} />
                        {/* 关键词搜索结果页面 */}
                        <Route path="/allProducts" component={AllProducts} />
                        {/* 分类搜索 */}
                        <Route path="/categorySearch" component={CategorySearch} />
                        {/* 详情页面 */}
                        <Route path="/details" component={Details} />
                        {/* 收藏页面 */}
                        <Route path="/collection" component={Collection} />
                        {/* 登录页 */}
                        <Route path="/login" component={Login}></Route> 
                        <Route path="/logon" component={Logon}></Route> 
                        <Redirect exact from='/' to="/Home" />
                        <Route path="*" component={NotFound}/>
                    </Switch>
                </Suspense>
            </div>
        )
    }
}

export default App;

// import Shop from '../pages/home/shop'
// import assort from '../pages/classify/classify'
// import Commodity from '../pages/commodity/commodity'
// import ShoppingCart from '../pages/shoppingCart/shoppingCart'
// import Personal from '../pages/personal/personal'
// const AppRouter = () => {
//     return (   
//         <Router>
//             <Switch>
//                 <Route exact path="/" component={Shop}></Route>
//                 <Route  path="/assort" component={assort}></Route>
//                 <Route  path="/commodity" component={Commodity}></Route>
//                 <Route  path="/shoppingCart" component={ShoppingCart}></Route>
//                 <Route  path="/personal" component={Personal}></Route>
//             </Switch>
//             <MyTabbar/>
//         </Router>
//     )
// }
// export default AppRouter;